<template>
	<view class="container">
		<form @submit="submitForm" class="flex diygw-form diygw-col-24">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 项目名称 </view>
					<view class="input solid">
						<input class="flex1" name="project_name_" comfirm-type="done" type="text" v-model="form.project_name_" placeholder="" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 项目类别 </view>
					<view class="input">
						<picker @change="changeFormProject_type_" :value="form.project_type_Index" :range="formData.project_type_Datas" range-key="label">
							<view class="picker-item" v-if="form.project_type_Index >= 0">
								{{ formData.project_type_Datas[form.project_type_Index].label }}
							</view>
							<view class="picker-item" v-else> 请选择 </view>
						</picker>
						<input hidden type="hidden" name="project_type_Index" :value="form.project_type_Index" />
						<input hidden type="hidden" name="project_type_" :value="form.project_type_" />
						<input hidden type="hidden" name="project_type_Label" :value="form.project_type_Label" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 项目预估年化收益 </view>
					<view class="input solid">
						<input class="flex1" name="project_earn_" comfirm-type="done" type="text" v-model="form.project_earn_" placeholder="请输入提示信息" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24 noborder">
					<view class="title"> 项目简介及优势 </view>
					<view class="input">
						<textarea class="flex1" name="project_desc_" v-model="form.project_desc_" placeholder="请输入提示信息"></textarea>
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 项目宣传图片 </view>
					<view class="input flex flex-wrap">
						<view class="upload" v-for="(item, index) in formData.picture_Datas">
							<image class="image" @tap="previewFormPicture_" :src="item" :data-url="item" mode="aspectFill"></image>
							<text class="diy-icon-close" :data-index="index" @tap="delFormUpload"></text>
						</view>
						<view class="upload" v-if="formData.picture_Datas.length < 6" @tap="uploadFormPicture_">
							<text class="diy-icon-cameraadd"></text>
						</view>
						<input hidden :value="form.picture_" name="picture_" maxlength="-1" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 商业计划书 </view>
					<view class="input flex flex-wrap">
						<view class="upload" v-for="(item, index) in formData.project_paper_Datas">
						
							<image class="c-title" @tap="previewFormProject_paper_" :src="item" :data-url="item" mode="aspectFill"></image>
							<text class="diy-icon-close" :data-index="index" @tap="delFormUpload"></text>
						</view>
						<view class="upload" v-if="formData.project_paper_Datas.length < 6" @tap="uploadFormProject_paper_">
							<text class="diy-icon-cameraadd"></text>
						</view>
						<input hidden :value="form.project_paper_" name="project_paper_" maxlength="-1"  />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 联系人 </view>
					<view class="input solid">
						<input class="flex1" name="user_name_" comfirm-type="done" type="text" v-model="form.user_name_" placeholder="请输入提示信息" />
					</view>
				</view>
				<view class="diygw-form-item diygw-col-24">
					<view class="title"> 联系电话 </view>
					<view class="input solid">
						<input class="flex1" name="user_phone_" comfirm-type="done" type="text" v-model="form.user_phone_" placeholder="请输入提示信息" />
					</view>
				</view>
				<view class="flex diygw-col-24 justify-between flex-nowrap flex1-clz">
					<view class="diygw-col-6 text-clz diygw-text-sm"> 项目成本选项 </view>
					<view class="flex diygw-col-5">
						<button style="color: rgba(247, 246, 246, 0.99) !important; background-color: #d3c3c3 !important" class="diygw-btn radius flex1 margin-xs button-button-clz">添加</button>
					</view>
				</view>
				<view class="diygw-col-24"> 注：普通发布仅对朋友和指定导师可见，优选发布对所有人可见。 </view>
			</view>
			<view class="flex diygw-col-24 flex-nowrap flex2-clz">
				<view class="flex diygw-col-11">
					<button form-type="submit" class="diygw-btn line-orange radius flex1 margin-xs button1-button-clz">普通发布</button>
				</view>
				<view class="flex diygw-col-11">
					<button @tap="navigateTo" data-type="publishApi" class="diygw-btn orange radius flex1 margin-xs button2-button-clz">优选发布</button>
				</view>
			</view>
		</form>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				publish1: {
					code: '200',
					data: {
						count: 9,
						list: [
							{
								project_type_: '教育业',
								user_phone_: '123',
								user_id_: '434443664980705281',
								user_name_: '用户1',
								id_: '434440356570595329',
								project_paper_: '',
								project_status: '优选发布',
								picture_: 'image1',
								project_desc_: '好项目',
								project_name_: '作业帮'
							},
							{
								project_type_: '食品业',
								user_phone_: '123',
								user_id_: '434443977751527425',
								user_name_: '用户2',
								id_: '434554158620868609',
								project_status: '优选发布',
								picture_: 'image2',
								project_desc_: '真好喝',
								project_name_: '汇源果汁'
							},
							{
								project_type_: '科技业',
								user_phone_: '222',
								user_id_: '434443977751527426',
								user_name_: '用户3',
								id_: '434559619204907009',
								project_status: '优选发布',
								picture_: 'image3',
								project_desc_: '项目简介项目简介',
								project_name_: '华为项目'
							},
							{
								project_type_: '教育业',
								user_phone_: '123',
								user_id_: '434444372742504449',
								user_name_: '用户4',
								id_: '434559717528043521',
								project_status: '成交',
								picture_: 'image4',
								project_desc_: '项目简介项目简介',
								project_name_: '作业帮2'
							},
							{
								project_type_: '食品业',
								user_phone_: '123',
								user_id_: '434443664980705281',
								user_name_: '用户1',
								id_: '434559825713037313',
								project_paper_: '',
								project_status: '成交',
								picture_: 'image5',
								project_desc_: '项目简介项目简介',
								project_name_: '汇源果汁2'
							},
							{
								project_type_: '食品业',
								user_phone_: '123',
								user_id_: '434444372742504449',
								user_name_: '用户4',
								id_: '434559825713037314',
								project_status: '成交',
								picture_: 'image4',
								project_desc_: '项目简介',
								project_name_: '汇源果汁3'
							},
							{
								id_: '435370309045452801'
							},
							{
								user_name_: 'yyy',
								id_: '435370347915378689'
							},
							{
								id_: '435370388546650113'
							}
						]
					},
					isOk: true
				},
				form: {
					project_name_: '',
					project_type_Index: 0,
					project_type_: '1',
					project_type_Label: '选项一',
					project_earn_: '',
					project_desc_: '',
					picture_: '',
					project_paper_: '',
					user_name_: '',
					user_phone_: ''
				},
				formData: {
					project_type_Datas: [
						{ value: '1', label: '选项一' },
						{ value: '2', label: '选项二' },
						{ value: '3', label: '选项三' }
					],
					picture_Datas: [],
					project_paper_Datas: []
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.publish1Api();
			},
			// 发布项目 API请求方法
			async publish1Api() {
				let publish1 = await this.$http.post(
					'https://agent.diygw.com/',
					{
						url: '/form/formCustSql/view/liststr_addProject',
						method: 'post',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						param: '{"curPage":1,"pageSize":"10","params":"{"isLocalPreview":"1"}"}'
					},
					{
						'Content-type': 'application/json'
					},
					'json'
				);
				this.publish1 = publish1;
			},

			// addProject 自定义方法
			async addProjectFunction(param) {
				let thiz = this;
				let param = param && (param.param || param.param == 0) ? param.param : '{"curPage":1,"pageSize":"10","params":"{"isLocalPreview":"1"}"}';
				await this.publish1Api();
			},
			async submitForm(e) {
				this.validateForm = this.Validate({
					project_name_: {
						required: {
							message: '名称不能为空'
						}
					},
					user_name_: {
						required: {
							message: '联系人不能为空'
						}
					},
					user_phone_: {
						required: {
							message: '联系电话不能为空'
						}
					}
				});
				if (!this.validateForm.checkForm(e)) {
					let data = this.validateForm.errorList[0];
					this.showToast(data.msg, 'none');
					return false;
				} else {
					//保存数据
					let param = e.detail.value;
					param.url = '/form/formCustSql/view/liststr_addProject';
					let res = await this.$http.post('https://agent.diygw.com', param, {}, 'json');
					if (res.code == 200) {
						this.showToast(res.msg, 'success');
					} else {
						this.showModal(res.msg);
					}
				}
			},
			changeFormProject_type_(e) {
				let project_type_Index = e.detail.value;
				let project_type_Datas = this.formData.project_type_Datas;
				let project_type_Label = project_type_Datas[project_type_Index].label;
				let project_type_ = project_type_Datas[project_type_Index].value;

				this.form.project_type_Index = project_type_Index;
				this.form.project_type_Label = project_type_Label;
				this.form.project_type_ = project_type_;
			},
			async uploadFormPicture_(e) {
				await this.uploadImage(this, 'form.picture_', 'formData.picture_Datas', '/sys/sysFile/upload');
			},
			delFormUpload(evt) {
				let { index } = evt.currentTarget.dataset;
				let formDatas = this.formData.picture_Datas;
				formDatas.splice(index, 1);
				let picture_ = picture_Datas.join(',');
				this.formData.picture_Datas = picture_Datas;
				this.form.picture_ = picture_;
			},
			previewFormPicture_(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url, // 当前显示图片的http链接
					urls: this.formData.picture_Datas // 需要预览的图片http链接列表
				});
			},
			async uploadFormProject_paper_(e) {
				await this.uploadImage(this, 'form.project_paper_', 'formData.project_paper_Datas', '/sys/sysFile/upload');
			},
			delFormUpload(evt) {
				let { index } = evt.currentTarget.dataset;
				let formDatas = this.formData.project_paper_Datas;
				formDatas.splice(index, 1);
				let project_paper_ = project_paper_Datas.join(',');
				this.formData.project_paper_Datas = project_paper_Datas;
				this.form.project_paper_ = project_paper_;
			},
			previewFormProject_paper_(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url, // 当前显示图片的http链接
					urls: this.formData.project_paper_Datas // 需要预览的图片http链接列表
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-clz {
		margin-left: 5px;
		font-weight: bold;
		width: calc(25% - 5px - 5px) !important;
		font-size: 14px;
		margin-top: 10px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.button-button-clz {
		margin: 3px !important;
	}
	.text1-clz {
		font-style: italic;
	}
	.button1-button-clz {
		margin: 3px !important;
	}
	.button2-button-clz {
		margin: 3px !important;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
	}
</style>
